<template>
	<view>
		<cu-custom :isBack="true" :bgColor="'bg-'+theme">
			<block slot="backText"></block>
			<block slot="content"><text>我的店员</text></block>
		</cu-custom>
		<view class="app-container">
			<view class="bg-arc">
				<view class="bgcolor" :class="'bg-'+theme"></view>
			</view>
			<view class="app-body ">
				<view class="text-center">
					<view class="cu-avatar xl round default-bg border">
						<image v-if="member && member.head_portrait" :src="member.head_portrait"></image>
					</view>
				</view>
				<view class="grid col-3 text-white margin-tb">
					<view class="data-item text-center">
						<view class="item1">{{teamInfo && teamInfo.total ? teamInfo.total : '0'}}人</view>
						<view class="item2">我的店员总数</view>
					</view>
					<view class="data-item text-center">
						<view class="item1 name">{{(member && member.nickname)?member.nickname:''}}</view>
						<view class="item2 id">ID:{{teamInfo && teamInfo.id ? teamInfo.id : '0'}}</view>
					</view>
					<view class="data-item text-center">
						<view class="item1">{{member && member.channel_pid ? member.channel_pid : '0'}}</view>
						<view class="item2">我的导师</view>
					</view>
				</view>
				<view class="list-box bg-white margin-lr radius" v-if="teamInfo">
					<scroll-view scroll-x class="bg-white nav" :scroll-left="scrollLeft">
						<view class="flex text-center">
							<view class="cu-item flex-sub" :class="index==TabCur?'cur text-'+theme:''" v-for="(item,index) in teamInfo.levelData"
							 :key="index" @tap="tabSelect" :data-id="index">
								{{item.level.name}} ({{item.count}})
							</view>
						</view>
					</scroll-view>
					<view class="content-view" v-for="(tab,i) in teamInfo.levelData" :class="i==TabCur?'cur':''" v-bind:key="i">
						<view class="cu-list" v-if="i==TabCur">
							<view v-for="(item,index) in tab.obj.list" :key="item.id" class="list-item cu-item space-between padding-tb-sm solid-bottom margin-lr">
								<view class="cu-avatar default_avatar round lg">
									<image v-if="item.member" :src="item.member.head_portrait" mode="aspectFill"></image>
									<image v-else :src="item.head_portrait" mode="aspectFill"></image>
								</view>
								<view class="content margin-left-sm  w100">
									<view class="firstline ">
										<text class="cu-tag sm bg-orange round">{{item.level.name}}</text>
										<text class="margin-left-sm">{{item.nickname}},{{item.id}}</text>
									</view>
									<view class="margin-top-xs">{{item.mobile}}</view>
								</view>
								<view class="action" style="min-width: 80px;">
									<view class="text-cut text-right margin-bottom-sm" v-if="tab.type == 3 && item.city">{{item.city.title}}</view>
									<view class="time text-right text-gray ">{{$common.timeFormat(item.created_at,'YYYY-MM-DD')}}</view>
									<view class="text-yellow margin-top-sm text-right" @tap="goList(item.id, item.nickname)">团队详情</view>
								</view>
							</view>
							<view class="cu-load margin-center" :class="tab.loading?'loading':'over'"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		filters: {
			hiddenN: function(str, frontLen, endLen) {
				var len = str.length - frontLen - endLen;
				if (len <= 0) len = 1
				var xing = '';
				for (var i = 0; i < len; i++) {
					xing += '*';
				}
				return str.substring(0, frontLen) + xing + (len > 1 ? str.substring(str.length - endLen) : '');
			}
		},
		data() {
			return {
				CLOUDPATH: this.$config.cloudPath,
				theme: this.$config.THEME(),
				teamInfo: null,
				TabCur: 0,
				scrollLeft: 0,
				member: null
			}
		},
		onLoad(options) {
			if (this.$common.loginAuth(true)) {
				this.$common.getMember().then((member) => {
					this.member = member
					let team_info = this.$common.getCache('team_info')
					if (!team_info) {
						this.$nextTick(function() {
							uni.startPullDownRefresh({})
						})
					} else {
						this.teamInfo = team_info
						this.getList(this.TabCur)
					}
				})
			}
		},
		onShow() {},
		methods: {
			getTeamInfo() {
				this.$http
					.get('team_info', {
						getcompany: 1
					})
					.then((response) => {
						uni.stopPullDownRefresh()
						this.teamInfo = response.data.data
						this.$common.setCache('team_info', response.data.data, 5 * 60)
						this.getList(this.TabCur)
					})
					.catch((response) => {
						uni.stopPullDownRefresh()
						console.log(response)
					})
			},
			tabSelect(e) {
				if (this.TabCur != e.currentTarget.dataset.id) {
					this.TabCur = parseInt(e.currentTarget.dataset.id)
					this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
					this.getList(this.TabCur)
				}
			},
			getList(index) {
				if(!this.teamInfo) return
				if (!this.teamInfo.levelData[index].obj) {
					this.teamInfo.levelData[index].obj = {
						list: [],
						hasMore: true,
						loading: false,
						page: 1,
						level: this.teamInfo.levelData[index].level.level,
					}
				}
				let obj = this.teamInfo.levelData[index].obj
				if (obj.hasMore && !obj.loading) {
					this.teamInfo.levelData[index].obj.loading = true
					this.$http
						.get('team_list', {
							level: obj.level,
							page: obj.page,
							pid: this.member.id,
						})
						.then((response) => {
							console.log(response)
							this.teamInfo.levelData[index].obj.loading = false
							let list = this.teamInfo.levelData[index].obj.list
							if (response.data.data.length > 0) {
								list = list.concat(response.data.data)
							} else {
								this.teamInfo.levelData[index].obj.hasMore = false
							}
							this.teamInfo.levelData[index].obj.list = list
							this.teamInfo.levelData[index].obj.page += 1
							console.log(this.teamInfo.levelData[index].obj)
							this.$forceUpdate()
						})
						.catch((response) => {
							console.log(response)
						})
				}
			},
			goList(id, name) {
				uni.navigateTo({
					url: "/pages/member/team/list?id=" + id + "&name=" + name
				})
			},
		},
		onReachBottom() {
			this.getList(this.TabCur)
		},
		onPullDownRefresh() {
			this.getTeamInfo()
		},
	}
</script>

<style>
</style>
